<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./popperjs.js"></script>
		<script src="./tippy.min.js"></script>
		
		<link rel="stylesheet" href="./tippy.css"/>
		<link rel="stylesheet" href="./themes.css"/>
		
	</head>
	<body>
		<select id="s1"  data-template="one">
			<option>a1</option>
			<option>a2</option>
			<option>a3</option>
			<option>a4</option>
		</select>
		
		<div style="display: none;">
		  <div id="one">
		    <strong>Content for `one`</strong>
		  </div>
		  <div id="two">
		    <strong>Content for `two`</strong>
		  </div>
		  <div id="three">
		    <strong>Content for `three`</strong>
		  </div>
		</div>
	</body>
	<script>
		setTimeout(()=>{
			tippy('select', {
			  content(reference) {
			    const id = reference.getAttribute('data-template');
			    const template = document.getElementById(id);
			    return template.innerHTML;
			  }
			});
		},3500)
		
	</script>
</html>